<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 
        <el-row :gutter="20">
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        </el-row> -->
      <el-row :gutter="20">
        <el-col :span="9">
          <el-form-item label="日志编号">
            {{ form.logId }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="请求地址">
            {{ form.logUrl }}
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="请求状态">
            <el-tag type="success" v-if="form.logStatus === 1">正常</el-tag>
            <el-tag type="danger" v-else>异常</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="响应时间">
            {{ form.logTime }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="请求IP">
            {{ form.logIp }}
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="请求方式">
            {{ form.logMethod }}
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="请求用户">
            {{ form.createdBy }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间">
            {{ form.createdDate }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="form.logStatus === 1">
        <el-col :span="24">
          <el-form-item label="返回值">
            {{ form.logResult }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="浏览器ua">
            {{ form.logUa }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="控制层">
            {{ form.logController }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="请求参数">
            {{ form.logParams }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="form.logStatus === 0">
        <el-col :span="24">
          <el-form-item label="异常信息">
            {{ form.logMessage }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { get } from "@/api/log";

export default {
  props: {
    activeId: {
      default: null,
      type: String,
    },
  },
  data() {
    return {
      form: {},
    };
  },
  watch: {
    activeId: {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.getById();
      },
    },
  },
  methods: {
    getById() {
      get(this.activeId).then((res) => {
        this.form = res.data;
      });
    },
  },
};
</script>

<style>
</style>